<template>
  <div>
    <el-drawer v-model="visible" size="400px" title="偏好设置" append-to-body destroy-on-close>
      <el-form :model="controlForm" size="small" label-width="100px" class="control-form" @submit.prevent>
        <el-form-item label="流程ID">
          <el-input v-model="controlForm.processId" @change="reloadProcessDesigner(true)"/>
        </el-form-item>
        <el-form-item label="流程名称">
          <el-input v-model="controlForm.processName" @change="reloadProcessDesigner(true)"/>
        </el-form-item>
        <el-form-item label="流转模拟">
          <el-switch v-model="controlForm.simulation" inactive-text="停用" active-text="启用"
                     @change="reloadProcessDesigner()"/>
        </el-form-item>
        <el-form-item label="禁用双击">
          <el-switch v-model="controlForm.labelEditing" inactive-text="停用" active-text="启用"
                     @change="changeLabelEditingStatus"/>
        </el-form-item>
        <el-form-item label="自定义渲染">
          <el-switch v-model="controlForm.labelVisible" inactive-text="停用" active-text="启用"
                     @change="changeLabelVisibleStatus"/>
        </el-form-item>
        <el-form-item label="流程引擎">
          <el-radio-group v-model="controlForm.prefix" @change="reloadProcessDesigner()">
            <el-radio value="camunda">camunda</el-radio>
            <el-radio value="flowable">flowable</el-radio>
            <el-radio value="activiti">activiti</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工具栏">
          <el-radio-group v-model="controlForm.headerButtonSize">
            <el-radio value="small">small</el-radio>
            <el-radio value="default">default</el-radio>
            <el-radio value="large">large</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-switch v-model="pageMode" active-text="dark" inactive-text="light" @change="changePageMode"></el-switch>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import CustomRenderer from "components/start-activiti/modules/custom-renderer";

export default {
  name: "startActivitiPreference",

  props: {
    controlForm: {type: Object},

  },
  watch: {},
  data() {
    return {
      visible: false,
      pageMode: false,
    }
  },
  methods: {
    toggleVisible() {
      this.visible = !this.visible
    },
    reloadProcessDesigner(notDeep) {
      this.controlForm.additionalModel = [];
      for (const key in this.$parent.addis) {
        if (this.$parent.addis[key]) {
          this.controlForm.additionalModel.push(this.$parent.addis[key]);
        }
      }
      !notDeep && (this.$parent.xmlString = undefined);
      this.$parent.reloadIndex += 1;
      this.$parent.modeler = null; // 避免 panel 异常
    },
    changeLabelEditingStatus(status) {
      this.$parent.addis.labelEditing = status ? {labelEditingProvider: ["value", ""]} : false;
      this.$parent.reloadProcessDesigner();
    },
    changeLabelVisibleStatus(status) {
      this.$parent.addis.customRenderer = status ? CustomRenderer : false;
      this.$parent.reloadProcessDesigner();
    },
    changePageMode(mode) {
      const theme = mode
          ? {
            // dark
            stroke: "#ffffff",
            fill: "#333333"
          }
          : {
            // light
            stroke: "#000000",
            fill: "#ffffff"
          };
      const elements = this.$parent.modeler.get("elementRegistry").getAll();
      this.$parent.modeler.get("modeling").setColor(elements, theme);
    }
  }
}
</script>

<style scoped>

</style>